<template>
  <el-form ref="formRef" :model="formState" :rules="rules" :label-width="labelWidth">
    <el-row>
      <el-col v-for="(item, index) in formDataList" :key="index" :span="item.span ? item.span : 12" v-show="!item.hidden">
        <el-form-item :label="item.label" :prop="item.name">
          <el-input v-if="item.type === 'input'" v-model="formState[item.name]" :placeholder="item.placeholder" v-bind="item.props" v-on="item.fn ? item.fn : {}" />
          <el-input
            v-else-if="item.type === 'textarea'"
            :rows="3"
            type="textarea"
            v-model="formState[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.props"
            v-on="item.fn ? item.fn : {}"
          />
          <el-input-number
            v-else-if="item.type === 'input-number'"
            v-model="formState[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.props"
            v-on="item.fn ? item.fn : {}"
          />
          <IconSelect
            v-else-if="item.type === 'icon-select'"
            v-model="formState[item.name]"
            :icons-value="formState[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.props"
            v-on="item.fn ? item.fn : {}"
            class="w-[100%]"
          />
          <el-radio-group v-else-if="item.type === 'radio-group'" v-model="formState[item.name]" :placeholder="item.placeholder" v-bind="item.props" v-on="item.fn ? item.fn : {}">
            <el-radio :label="list.value" v-for="(list, i) in item.options" :key="i">
              {{ list.label }}
            </el-radio>
          </el-radio-group>
          <el-select
            v-else-if="item.type === 'select'"
            v-model="formState[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.props"
            v-on="item.fn ? item.fn : {}"
            class="w-[100%]"
          >
            <el-option v-for="(list, i) in item.options" :key="i" :value="list.value" :label="list.label" />
          </el-select>

          <el-date-picker
            v-else-if="item.type === 'date-picker'"
            v-model="formState[item.name]"
            :placeholder="item.placeholder"
            v-bind="item.props"
            v-on="item.fn ? item.fn : {}"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
  import { computed, ref } from 'vue';
  import { FormDataItem } from './type';
  import IconSelect from '@/components/IconSelect/index.vue';

  const props = withDefaults(
    defineProps<{
      data: any;
      rules: any;
      formData: Array<any>;
      labelWidth?: any;
    }>(),
    {
      labelWidth: '120px',
      data: () => ({}),
      rules: () => ({}),
      formData: () => [],
    },
  );

  const formRef = ref();
  const formState = computed(() => props.data);
  const labelWidth = computed(() => props.labelWidth);
  const formDataList = computed((): FormDataItem[] => props.formData as FormDataItem[]);
  const rules = computed(() => props.rules);
  const reset = () => {
    formRef.value && formRef.value.resetFields();
  };

  const treeRef = ref();
  const treeClear = () => {
    treeRef.value &&
      treeRef.value.forEach((item: any) => {
        item.clear();
      });
  };
  const selectedNodeIds = (id: number) => {
    treeRef.value &&
      treeRef.value.forEach((item: any) => {
        item.forest.selectedNodeIds.push(id);
      });
  };

  const submitForm = async (fn: () => void) => {
    await formRef.value.validate((valid: any, fields: any) => {
      if (valid) {
        fn();
        console.log('submit!');
      } else {
        console.log('error submit!', fields);
      }
    });
  };

  defineExpose({
    reset,
    submitForm,
    treeClear,
    selectedNodeIds,
  });
</script>
